<template>
  <div class="card-item" >
    <img :src="item.photos[0]" class="card-img" alt="Profile photo">

    <div class="card-info">
      <h2 class="name">{{ item.name }}</h2>
      <p class="tags">
        <span :class="['sex', item.sex]">
          <i :class="['iconfont', `icon-${item.sex}`]"></i>
          {{ item.age }}
        </span>
        <span class="starsign">{{ item.starsign }}</span>
      </p>
      <p class="distance">{{ item.distance }}</p>
      <p class="sign">{{ item.sign }}</p>
    </div>
  </div>
</template>
<script setup lang="ts">
import { defineProps } from 'vue'
import type { PageItem } from './FlipCard.vue'

const props = defineProps<{
  item: PageItem,
  key: number
}>()
</script>
<style scoped>
.card-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: white;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, opacity 0.3s ease;
  will-change: transform, opacity;
  user-select: none;
  cursor: pointer;
  transform-origin: center center;
}


.card-img {
  width: 100%;
  height: 65%;
  object-fit: cover;
}

.card-info {
  padding: 15px;
}

.name {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 8px;
}

.tags {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 16px;
}

.sex {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 20px;
  background: #f5f5f5;
}

.sex.male {
  color: #6bb5ff;
}

.sex.female {
  color: #ff7eb4;
}

.iconfont {
  font-size: 16px;
}

.distance {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.sign {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>